Vue图片预览插件v

2023-10-23 04:15| 来源: 网络整理| 查看: 265

Vue图片浏览组件v-viewer中文参考文档

0. 基于viewerjs

v-viewer是基于viewerjs的

在vue中使用viewerjs

import Viewer from 'viewerjs' import 'viewerjs/dist/viewer.css' export default { name: 'HelloWorld', data() { return { imgArr: [ 'https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200' ] } }, mounted() { const ViewerDom = document.getElementById('index') const viewer = new Viewer(ViewerDom, { // 相关配置项 }) console.log(viewer) } } * { padding: 0; margin: 0; } ul { display: flex; flex-wrap: wrap; } ul li { width: 265px; height: 180px; list-style: none; border: 2px solid #ccc; border-radius: 3px; padding: 1px; margin: 10px; cursor: pointer; } ul li img { width: 100%; height: 100%; } 1. v-viewer 安装和使用 1.1 安装和引入 npm install [email protected]

import 'viewerjs/dist/viewer.css' import VueViewer from 'v-viewer' import Vue from 'vue' Vue.use(VueViewer) 1.2 三种使用方式：指令、组件、api 指令形式: 只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer自动处理。组件形式: 引入组件。使用作用域插槽来定制你的图片展示方式 api形式: 直接执行函数: this.$viewerApi({options: {}, images: []}) 来展现

Click to show import 'viewerjs/dist/viewer.css' import VueViewer from 'v-viewer' import Vue from 'vue' Vue.use(VueViewer) export default { data() { return { images: [ 'https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200' ] } }, methods: { show() { this.$viewerApi({ images: this.images }) } } } 2.Viewer的配置项 & 方法

参考viewer.js

// 默认配置 defaultOptions: { zIndex: 3000, inline: false, // 启用内联模式 button: true, // 在查看器右上角显示按钮 navbar: true, // 指定导航栏的可见性 title: false, // 指定标题的可见性和内容 toolbar: false, // 指定工具栏及其按钮的可见性和布局 tooltip: true, // 放大或缩小时显示带有图像比率（百分比）的工具提示 movable: true, // 启用以移动图像 zoomable: true, // 启用以缩放图像 rotatable: false, // 启用以旋转图像 scalable: true, // 启用以缩放图像。 transition: true, // 为某些特殊元素启用CSS3转换 fullscreen: false, // 启用以在播放时请求全屏 keyboard: true, // 启用键盘支持。 url: 'src', // 定义获取原始图像URL以供查看的位置 } 3. 在实际项目中使用 3.1 在main.js中全局注册 // 在main.js中全局注册 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { inline: true, button: true, navbar: true, title: true, toolbar: true, tooltip: true, movable: true, zoomable: true, rotatable: true, // "scalable": true, transition: true, fullscreen: true, keyboard: true, url: 'data-source' } }) 3.2 单独封装一个图片预览组件 export default { name: 'VViewer', props: { options: { // 图片列表 type: Array, required: true }, imgStyle: { // 值有fill， contain， cover， scale-down,默认为contain type: String, default() { return 'contain' } }, borderRadius: { // 图片的圆角效果 type: String, default: '0px' } }, data() { return { imgList: [] } }, created() { this.imgList = this.options //图片列表 }, methods: {} } .descimgBox { width: 100%; height: 100%; overflow: auto; display: flex; align-items: baseline; /* align-items: flex-start; */ } .descimgBox img { width: 90%; height: 80%; margin: 5px 1%; cursor: zoom-in; } 3.3 使用图片预览组件 import VViewer from '@/components/vviewer' export default { name: 'ImgViewer', components: { VViewer }, data() { return { baseUrl: 'https://picsum.photos/', imgPath: '', imgList: [ 'https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200' ] } } }

【本文地址】

公司简介

联系我们